<template>
    <a-layout class="layersty" style="height:100%;">
        <a-layout-content style="order:1" class="defaultContent">
            <rx-layout>
                <template #middle>
                    <div id="html" class="FormPdfHtml" :style="{'width':paper.paperWidth+'mm','height':paper.paperHeight+'mm'}" v-html="pdfHtml">
                    </div>
                </template>
            </rx-layout>

        </a-layout-content>

        <a-layout-footer style="order:0;">
            <a-form class="buttongmodle">
                <a-button-group>
                    <a-button @click="print()">{{ $ti18('rxForm.print', '打印') }}</a-button>
                </a-button-group>
            </a-form>
        </a-layout-footer>

    </a-layout>
</template>

<script>
import FormPdfTemplateApi from "@/common/api/form/formPdfTemplate.js";
import {Util, RxDialog, RxLayout} from '@lowcode/jpaas-base-lib';
import print from 'print-js';
export default {
    name: "FormPdfHtml",
    props: ["pkId",  "dataJson", "formConfig", "type"],
    components: {
        RxDialog,
        RxLayout,
    },

    data() {
        return {
            pdfHtml: '',
            paper: {
                paperType: 'A4',
                paperWidth: 210,
                paperHeight: 297
            },
        }
    },
    created() {
        this.loadData();
    },
    methods: {
        loadData() {
            let self_ = this;
            if (!self_.pkId) {
                return;
            }
            let data = JSON.parse(JSON.stringify(self_.dataJson ));
            delete data.initData;
            let values = Object.values(self_.formConfig );
            let params = {
                pkId: this.pkId,
                data: JSON.stringify(data),
                metadata: JSON.stringify(values),
                type: this.type
            };
            FormPdfTemplateApi.getTemplate(params).then(res => {
                var html = res.data.pdfHtml;
                this.pdfHtml = html;
                if (res.data.paper) {
                    this.paper = JSON.parse(res.data.paper)
                }
            })
        },
        print() {
            var self_ = this;
            printJS({
                printable: 'html',
                scanStyles: false,
                style: '', //传入自定义时的样式
                type: 'html',
                targetStyles: ['*'],
                ignoreElements: ['no-print', 'bc', 'gb']
            })
        },
    }

}
</script>

<style scoped>
.buttongmodle {
    text-align: right;
}

.ant-layout-footer {
    padding: 8px 20px !important;
}

.FormPdfHtml {
    margin: auto;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
    padding: 20px;
}


</style>
<style>
.table-form>caption {
    caption-side: top!important;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    padding: 10px;
    color: #555;
    background: #fff;
}
</style>
